<template>
  <div id="app">
    <div class="sidebar hide-scroll">
      <router-link
        v-for="route of menu"
        :key="route.path"
        tag="div"
        :to="route.path"
        :title="route.menu"
      >
        {{ route.menu }}
      </router-link>
    </div>
    <transition name="router" mode="out-in">
      <keep-alive>
        <router-view class="container"/>
      </keep-alive>
    </transition>
  </div>
</template>
<script>
export default {
  computed: {
    menu() {
      return this.$router.options.routes.filter((i) => i.menu);
    },
  },
};
</script>
<style lang="scss">
$primary: #2980b9;
.router-enter-active,
.router-leave-active {
  transition: all 0.3s;
}
.router-enter {
  opacity: 0;
  transform: translateX(-30px);
}
.router-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
body {
  margin: 0;
  padding: 0;
  #app {
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    .sidebar {
      flex: 0 0 200px;
      margin-right: 10px;
      box-shadow: 0 0 10px $primary;
      box-sizing: border-box;
      overflow-y: auto;
      background-color: $primary;
      z-index: 1;
      .router-link-active {
        color: #fff;
        font-weight: 600;
      }
      div {
        padding: 0 20px;
        line-height: 60px;
        text-decoration: none;
        color: #dedede;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &:last-of-type {
          border-bottom: none;
        }
        &:hover {
          cursor: pointer;
        }
      }
    }
    .container {
      box-sizing: border-box;
      flex: 1;
      overflow-x: auto;
      padding: 10px;
    }
  }
}
</style>
